import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Form, Input } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';

interface IProps {
  dispatch?: ({ type }: { type: string, payload?: any }) => Promise<any>;
  current: number;
  form: any;
  initCurrent: Function;
  new: boolean;
  dict?: any;
  cond?: any;
}

const FormItem = Form.Item;

@connect(({ task_month }) => ({
  cond: task_month.taskCond,
}))
class Search extends Component<IProps, any> {

  search = e => {
    e.preventDefault();
    const { dispatch, form, initCurrent } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'task_month/updateTaskCond',
          payload: {
            ...values
          }
        })
        initCurrent()
      }
    });
  }

  addTask = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    dispatch({ type: 'task_month/create' })
  }

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow style={{ paddingRight: '40px' }}>
          <SearchCol key={0} span={5}>
            <FormItem
              label="任务名称"
              {...formItemLayout}
            >
              {getFieldDecorator('name', {
                rules: [{ message: '任务名称' }],
              })(
                <Input style={{ width: '100%' }} placeholder="任务名称" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={3} span={19}>
            <SearchRow type="flex" justify="end">
              <SearchButton htmlType="submit">搜索</SearchButton>
              <Link to='/data/task_month/new'>
                <SearchButton type="primary" onClick={this.addTask}>新增任务</SearchButton>
              </Link>
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<IProps>()(Search);
export default SearchS;
